<style>
.layout-logo {
    float: left;
    font-size: 24px;
    color: #ffffff;
    padding-left: 20px;
}
.layout-shrink {
    float: left;
}
.layout-nav {
    padding-right: 45px;
    float: right;
    font-size: 18px;
}

.layout-nav-span {
    font-size: 18px;
}

.layout-nav-a {
    color: #ffffff;
}
</style>

<template>
    <div>
        <Menu mode="horizontal" theme="dark" active-name="1" style="background:#17538b">
            <router-link to="/home" class="layout-logo">
                云南省农业技术推广总站水果填报系统
            </router-link>
            <div class="layout-shrink">
                <i-button type="text" @click="toggleClick">
                    <Icon type="navicon" size="32"></Icon>
                </i-button>
            </div>
            <div class="layout-nav">
                <Dropdown trigger="click">
                    <a href="javascript:void(0)" class="layout-nav-a">
                        <Icon type="android-person"></Icon>&nbsp;&nbsp;
                        <span>{{UserName}}</span>
                        <Icon type="arrow-down-b"></Icon>
                    </a>
                    <Dropdown-menu slot="list">
                        <Dropdown-item>
                            <router-link to="/sys/userinfo">
                                <Icon type="person-stalker" size="18"></Icon>&nbsp;&nbsp;
                                <span class="layout-nav-span">个人信息修改</span>
                            </router-link>
                        </Dropdown-item>
                        <Dropdown-item>
                            <a href="javascirpt:;" @click="showPwdModal()">
                                <Icon type="android-create" size="18"></Icon>&nbsp;&nbsp;
                                <span class="layout-nav-span">修改密码</span>
                            </a>
                        </Dropdown-item>
                        <Dropdown-item>
                            <a href="javascirpt:;" @click="loginOut()">
                                <Icon type="power" size="18"></Icon>&nbsp;&nbsp;
                                <span class="layout-nav-span">退出</span>
                            </a>
                        </Dropdown-item>
                    </Dropdown-menu>
                </Dropdown>
            </div>
        </Menu>
        <Modal v-model="showType" :mask-closable="false" :closable="false">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">密码修改</span>
            </p>
            <div slot="footer">
                <Button type="primary" @click="save('dataModel')">修改</Button>
                <Button type="ghost" @click="cancel('dataModel')" style="margin-left: 8px">取消</Button>
            </div>
            <Form ref="dataModel" :model="dataModel" :rules="ruleValidate" :label-width="80">
                <Form-item label="原始密码" prop="OriginalPwd">
                    <Input type="password" v-model="dataModel.OriginalPwd" placeholder="请输入原始密码"></Input>
                </Form-item>
                <Form-item label="新密码" prop="Password">
                    <Input type="password" v-model="dataModel.Password" placeholder="请输入新密码"></Input>
                </Form-item>
                <Form-item label="确认密码" prop="ConfirmPwd">
                    <Input type="password" v-model="dataModel.ConfirmPwd" placeholder="请输入确认密码"></Input>
                </Form-item>
            </Form>
        </Modal>
    </div>
</template>
<script>
export default {
    props: ['toggleClick'],
    data() {
        const validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.dataModel.ConfirmPwd !== '') {
                    // 对第二个密码框单独验证
                    this.$refs.dataModel.validateField('ConfirmPwd');
                }
                callback();
            }
        };
        const validatePassCheck = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.dataModel.Password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            userInfo: this.GetlocaStorage("fruuserinfo"),
            UserName: "",
            showType: false,
            ruleValidate: {
                OriginalPwd: [{ required: true, message: '原始密码不能为空!', trigger: 'blur' }],
                Password: [{ required: true, validator: validatePass, trigger: 'blur' }],
                ConfirmPwd: [{ required: true, validator: validatePassCheck, trigger: 'blur' }],
            },
            dataModel: {
                OriginalPwd: '',
                Password: '',
                ConfirmPwd: '',
                UserId: ''
            },
        }
    },
    methods: {
        showPwdModal() {
            this.dataModel.UserId = this.userInfo.UserId;
            this.showType = true;
        },
        //保存方法
        save(modelname) {
            var self = this;
            this.$refs[modelname].validate((valid) => {
                if (valid) {
                    this.$http.post('User/PostPassword', this.dataModel).then(
                        function (res) {
                            switch (res.data.status) {
                                case 0:
                                    self.$Modal.info({ title: "提示信息", content: res.data.message, desc: false });
                                    break;
                                case 1:
                                    self.$Modal.success({ title: "提示信息", content: res.data.message, desc: false });
                                    break;
                                case -1:
                                    self.$Modal.warning({ title: "提示信息", content: "修改失败,请与管理员联系!" });
                                    break;
                            }
                        });
                }
            });
        },
        //取消方法
        cancel(modelname) {
            this.$refs[modelname].resetFields();//重置model
            this.showType = false;//关闭modal
        },
        loginOut() {
            var self = this;
            this.$Modal.confirm({
                title: '提示信息',
                content: '<p>确定退出登录吗？</p>',
                onOk: () => {
                    self.$http.get('Account').then(function (res) {
                        if (res.data.status == 1) {
                            self.SetlocaStorage("fruuserinfo", null);//清空缓存数据
                            self.SetlocaStorage("arealist", null);//清空缓存数据
                            self.SetlocaStorage("dictlist", null);//清空缓存数据
                            self.$router.push('/');//跳转到登录页面   
                        }
                        else {
                            self.$Modal.error({ title: '提示信息', content: res.data.message });
                        }
                    });
                },
                onCancel: () => {
                    self.$Modal.remove();
                }
            });
        },
        initUser() {
            this.UserName = this.userInfo.UserName;
        }
    },
    created: function () {
        this.initUser();
    }
}
</script>